/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import React, { useState, useEffect } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import { DomEditor } from "@wangeditor/editor";

export interface IRichEditorProps {
  onChange?: (url: string) => void;
  value?: string;
}

export default function RichEditor(props: IRichEditorProps) {
  console.log("富文本编辑器props", props);

  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // 编辑器内容
  // const [html, setHtml] = useState("");
  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: "请输入公司简介...",
    onChange: (editor: IDomEditor) => {
      console.log(editor); //富文本内容对象
      console.log(editor.getHtml());
      setEditor(editor);
      props.onChange!(editor.getHtml());
    },
  };
  return (
    <div>
      <Toolbar
        editor={editor}
        mode="default"
        style={{ border: "1px solid #d8d8d8" }}
      />
      <Editor
        defaultConfig={editorConfig}
        style={{ height: "300px", border: "1px solid #d8d8d8" }}
        // defaultHtml={html}
      />
    </div>
  );
}
